<!-- TODO relauch功能待定，他能打开另一个小程序 -->
<template>
	<view class="btn-area">
		<navigator url="/pages/demo/demo" hover-class="navigator-hover">
			<button type="default">跳转到demo页面</button>
		</navigator>
		<!-- 默认navigator的打开方式是 navigate 即当前应用下打开，这种模式可以点击左上角返回来源页面 -->
		<navigator url="/pages/comp/swiper" hover-class="navigator-hover">
			<button type="default">跳转到swiper-image页面</button>
		</navigator>
		<navigator url="/pages/form/form" hover-class="navigator-hover">
			<button type="default">跳转到form元素页面</button>
		</navigator>
		<!-- redirect 这种open-type脱离了来源页面，重新打开了一个新应用，无法再回到上一个应用，且无法通过浏览器返回 -->
		<navigator url="/pages/index/hover" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转到hover页面</button>
		</navigator>
		<!-- 此处无法生效，因为open-type:switchTab是对底部导航栏中的对应的页面进行的切换操作; -->
		<!-- 该切换不会关闭当前页面，只是将指定的tab页面切换为显示状态，并且保留当前页面的状态，方便用户来回切换 -->
		<navigator url="/pages/index/scrollview" open-type="switchTab" hover-class="other-navigator-hover">
			<button type="default">跳转scrollview页面</button>
		</navigator>
		<navigator url="/pages/vuepage/mustache" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转vue文本插值页面</button>
		</navigator>
		<navigator url="/pages/vuepage/bindclass" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转vue绑定样式页面</button>
		</navigator>
		<navigator url="/pages/vuepage/vif" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转vif条件渲染页面</button>
		</navigator>
		<navigator url="/pages/vuepage/vfor/vfor" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转v-fro列表渲染页面</button>
		</navigator><navigator url="/pages/cases/checkboxdel/checkboxdel" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转购物车删除页面</button>
		</navigator>
		<navigator url="/pages/vuepage/forminputbind" open-type="redirect" hover-class="other-navigator-hover">
			<button type="default">跳转表单输入绑定页面</button>
		</navigator>
	</view>
</template>

<script setup>
	
</script>

<style>
	.navigator-hover {
		background-color: #bababa;
		opacity: 0.5;
	}
</style>
